<!--
 * @Author: yangfan 1437446666@qq.com
 * @Date: 2023-02-27 11:49:28
 * @LastEditors: yangfan 1437446666@qq.com
 * @LastEditTime: 2023-02-27 21:36:07
 * @FilePath: \s_2006A_shixun\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="box-wrap" id="box-wrap">
    <div class="box-wrap-context" id="box-wrap-context">
      <template v-for="(item, index) in state.list" :key="index">
        <div class="listItem" id="listItem">
          <div>
            {{ item.nextname }}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, nextTick } from 'vue'
interface listType {
  [key: string]: string
}
interface stateType {
  list: listType[]
}
export default defineComponent({
  name: 'HomeView',
  setup() {
    const state: stateType = reactive({
      list: [
        {
          id: '1',
          name: 'one',
          nextname: '我是第一名'
        },
        {
          id: '2',
          name: 'two',
          nextname: '我是第二名'
        },
        {
          id: '3',
          name: 'three',
          nextname: '我是第三名'
        },
        {
          id: '4',
          name: 'frou',
          nextname: '我是第四名'
        },
        {
          id: '5',
          name: 'five',
          nextname: '我是第五名'
        },
        {
          id: '6',
          name: 'six',
          nextname: '我是第六名'
        },
        {
          id: '7',
          name: 'serve',
          nextname: '我是第七名'
        },
        {
          id: '8',
          name: 'eight',
          nextname: '我是第八名'
        }
      ]
    })
    onMounted(async () => {
      await nextTick()
      //单个高度
      const singleheight = document.getElementById('listItem')
      //盒子的总高度
      const boxheight = document.getElementById('box-wrap-context')
      const allHeight = singleheight.clientHeight * state.list.length
      //设置盒子的高

      boxheight.style.height = allHeight + 'px'
      boxheight.style.transition = 'all 2s ease-out;'
      setInterval(() => {
        let num = 0
        num = num + 40
        boxheight.style.transform = ` translate(0, -${num}px)`
        if (num == 200) {
          num = 0
        }
      }, 1000)
    })
    return { state }
  }
})
</script>
<style lang="scss">
.box-wrap {
  width: 300px;
  height: 200px;
  border: solid 1px #ccc;
  overflow: hidden;
}
.listItem {
  width: 100%;
  height: auto;
  display: grid;
}
.listItem div {
  background-color: #8ca0ff;
  width: 100%;
  height: 50px;
}
.box-wrap-context {
  width: 100%;
}
</style>
